<template>
	<!-- 新增或修改地址页面 -->
	<view class="siteAddOrModify">
		<view class="site-mode">
			<view class="siteAddOrModify-info">
				<view class="title">姓名</view>
				<input class="siteRight" type="text" v-model="addressInfo.consignee" placeholder="请输入"
					placeholder-class="placeholderColor" />
			</view>
			<view class="siteAddOrModify-info">
				<view class="title">手机号码</view>
				<input class="siteRight" type="text" v-model="addressInfo.consignee_phone" placeholder="请输入"
					placeholder-class="placeholderColor" />
			</view>
			<view class="siteAddOrModify-info" @tap="chooseLocation">
				<view class="title">上门地址</view>
				<view class="getset" v-if='addressInfo.location==undefined'>
					<view class="getSite-title siteRight">
						<text>点击获取位置</text>
						<text class="icon iconfont icon-xiangyoujiantou"></text>
					</view>
				</view>
				<view class="siteinfo siteRight" v-else>{{addressInfo.location}}</view>
			</view>
			<view class="siteAddOrModify-info">
				<view class="title">详细地址</view>
				<input class="siteRight" type="text" v-model="addressInfo.detail" placeholder="请输入"
					placeholder-class="placeholderColor" />
			</view>
			<view class="sitedefault">
				<view class="title">设为默认</view>
				<switch color="#00b388" :checked="isSwitchOn" @change="handleSwitchChange"></switch>
			</view>
		</view>
		<view class="TapSave" @tap="save">点击保存</view>
		<view class="delete" v-if="siteId!=-1" @tap="onDelete">删除</view>

	</view>
</template>

<script>
	import util from '@/component/commen/api/util.js';
	export default {
		data() {
			return {
				isSwitchOn: false, //控制开关
				siteId: "", //从哪里点击进来的，用于判断当前是新增还是更改,-1:新增；其他：更改
				detailId: {}, //点击的数据的id
				addressInfo: { //地址数据
					id: "",
					uid: "",
					consignee: "", //收件人
					consignee_phone: "", //电话号码
					location: "", //位置名称
					detail: "", //详细地址
					lng: "", //纬度
					lat: "", //经度
					is_default: "", //是否默认(1:是,2:否)
				}
			};
		},
		onLoad(e) {
			this.siteId = e.id
			this.detailId = e.detailId
			console.log("detailId:", this.detailId)


		},
		mounted() {
			this.getDetail()
		},
		methods: {
			getDetail() { //获取点击进来的数据
				var params = {
					do: "address",
					op: "detail",
					id: this.detailId
				}
				util.requestWithSign(params).then(res => {
					if (res.data.is_default == 1) {
						this.isSwitchOn = true
					} else {
						this.isSwitchOn = false
					}
					console.log(this.isSwitchOn)
					this.addressInfo.id = res.data.id
					this.addressInfo.uid = res.data.uid
					this.addressInfo.consignee = res.data.consignee
					this.addressInfo.consignee_phone = res.data.consignee_phone
					this.addressInfo.location = res.data.location
					this.addressInfo.detail = res.data.detail
					this.addressInfo.lng = res.data.lng
					this.addressInfo.lat = res.data.lat
					this.addressInfo.is_default = res.data.is_default
					console.log("初始地址数据：", res.data)
				})
			},
			chooseLocation(e) { //点击获取位置
				if (!uni.getStorageSync("locate")) {
					return uni.getLocation({
						type: 'gcj02',
						success: (res) => {
							// console.log(res)
							const latitude = res.latitude;
							const longitude = res.longitude;
							// 处理获取到的定位信息
							uni.setStorageSync("locate", res)
							uni.chooseLocation({
								success: res => {
									console.log('选择的位置信息：', res);
									console.log(this.addressInfo)
									this.addressInfo.location = res.address
									this.addressInfo.lng = res.longitude
									this.addressInfo.lat = res.latitude
									// console.log('选择的位置信息：', res);
									// 在这里可以处理选择的位置信息，如将位置信息保存到数据中
								},
								fail: err => {
									uni.showToast({
										title: '选择位置失败',
										icon: 'none'
									});
								}
							});
						},
						fail: (err) => {
							console.log("获取位置失败",err)
							// 处理获取定位失败的情况
							// if (err.errCode === 1) {
								// 用户拒绝授权，显示提示并引导用户去设置页面开启定位权限
								uni.showModal({
									title: '提示',
									content: '请开启定位权限以获取位置信息',
									showCancel: true,
									success(res) {
										if (res.confirm) {
											// 用户点击确定，跳转至设置页面
											uni.openSetting({
												success(res) {
													console.log('openSetting success', res
														.authSetting);
													// 用户授权成功后再次尝试获取位置信息
													if (res.authSetting[
														'scope.userLocation']) {
														this.getLocation();
													}
												}
											});
										}
									}
								});
							// }
						}
					})
				}
				uni.chooseLocation({
					success: res => {
						console.log('选择的位置信息：', res);
						console.log(this.addressInfo)
						this.addressInfo.location = res.address
						this.addressInfo.lng = res.longitude
						this.addressInfo.lat = res.latitude
						// console.log('选择的位置信息：', res);
						// 在这里可以处理选择的位置信息，如将位置信息保存到数据中
					},
					fail: err => {
						uni.showToast({
							title: '选择位置失败',
							icon: 'none'
						});
					}
				});
			},

			save() { //点击保存
				console.log("我的地址信息：", this.addressInfo)
				const phoneRegex = /^1[3456789]\d{9}$/ //验证手机号
				if (this.isSwitchOn == true) {
					this.addressInfo.is_default = 1
				} else {
					this.addressInfo.is_default = 2
				}
				if (this.addressInfo.consignee == undefined) {
					return uni.showToast({
						title: "请输入收件人姓名",
						icon: "none"
					})
				}
				if (!phoneRegex.test(this.addressInfo.consignee_phone)) {
					return uni.showToast({
						title: "请输入正确手机号",
						icon: "none"
					})
				}
				if (this.addressInfo.location == undefined) {
					return uni.showToast({
						title: "请选择地址",
						icon: "none"
					})
				}
				if (this.addressInfo.detail == undefined) {
					return uni.showToast({
						title: "请输入详细地址",
						icon: "none"
					})
				}
				var params = {
					do: "address",
					op: "edit",
					id: this.addressInfo.id ? this.addressInfo.id : "",
					uid: this.addressInfo.uid ? this.addressInfo.uid : uni.getStorageSync("uid"),
					consignee: this.addressInfo.consignee,
					consignee_phone: this.addressInfo.consignee_phone,
					location: this.addressInfo.location,
					detail: this.addressInfo.detail,
					lng: this.addressInfo.lng,
					lat: this.addressInfo.lat,
					is_default: this.addressInfo.is_default
				}
				console.log("提交的数据：", params)
				util.requestWithSign(params).then(res => {
					console.log("数据存储成功", res)
					uni.showModal({
						title: res.message,
						showCancel: false,
						success: function(deletedata) {
							if (deletedata.confirm) {
								uni.navigateBack()
							}
						}
					})
				})
			},
			handleSwitchChange() { //点击开关
				this.isSwitchOn = !this.isSwitchOn


			},
			onDelete() { //点击删除按钮
				var _this = this
				uni.showModal({
					title: "提示",
					content: "确认删除该地址?",
					success: function(res) {
						if (res.confirm) {
							var params = {
								do: "address",
								op: "del",
								id: _this.addressInfo.id
							}
							util.requestWithSign(params).then(event => {
								uni.showModal({
									title: event.message,
									showCancel: false,
									success: function(deletedata) {
										if (deletedata.confirm) {
											uni.navigateBack()
										}
									}
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.siteAddOrModify {
		// font-size: 36rpx;

		.site-mode {
			background: #fff;

			.siteAddOrModify-info {
				display: flex;
				align-items: center;
				padding: 40rpx 40rpx;
				border-bottom: 2rpx solid #e5e5e5;

				.title {
					width: 145rpx;
					text-align: justify;
					text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
					text-align-last: justify;
					// border: 1px solid #000;
					margin-right: 25rpx;
				}

				.getset {
					width: 74%;

					// display: flex;
					// margin-right: 30rpx;
					// border: 1px solid #f00;
					.getSite-title {
						overflow: hidden;
						/* 隐藏超出部分的文本 */
						text-overflow: ellipsis;
						/* 显示省略号 */
						// border: 1px solid #000;
						color: #b0b0b0;

						// font-weight: bold;
						.icon-xiangyoujiantou {
							font-size: 31rpx;
						}
					}
				}

				.siteRight {
					width: 74%;
					white-space: nowrap;
					/* 让文本在一行内显示 */
					overflow: hidden;
					/* 隐藏超出部分的文本 */
					text-overflow: ellipsis;
					/* 显示省略号 */
					// border: 1px solid #000;
					font-size: 31rpx;
				}
			}

			.sitedefault {
				//默认地址栏
				justify-content: space-between;
				display: flex;
				align-items: center;
				padding: 15rpx 40rpx;

				.title {
					width: 145rpx;
					// border: 1px solid #f00;
					text-align: justify;
					text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
					text-align-last: justify;
					margin-right: 25rpx;
				}

				switch {
					// --bg-on: #2196F3; /* 设置打开时的背景颜色为蓝色 */
					transform: scale(0.8);
				}
			}
		}

		.TapSave {
			padding: 20rpx 0;
			width: 300rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 200rpx;
			background: #00b388;
			color: #fff;
			border-radius: 10rpx;
		}

		.delete {
			padding: 20rpx 0;
			width: 300rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 20rpx;
			color: #f00;
			border-radius: 10rpx;
			background: #e5e5e5;
		}
	}
</style>